<template>
	<view class="wanl-money">
		<view class="tab bg-white flex justify-between align-center margin-bottom-xs">
			<text @tap="changeTab(index)" :class="{cur:cur==index}" v-for="(item,index) in tabList" :key="index">{{item}}</text>
		</view>
        <wanl-scroll-list ref="list" :option="option" @load="load($event,'load')" @refresh="load($event,'refresh')">
			<view class="list bg-white">
				<view class="item" v-for="(item,index) in dataList" :key="index" @tap="toMoney(item)">
					<view class="flex justify-between align-center">
						<view class="head flex flex-direction">
							<text>{{item.title}}</text>
							<text>{{$wanlshop.timeFormat(item.createtime,'yyyy-mm-dd hh:MM:ss')}}</text>
						</view>
						<view class="flex justify-end align-center">
							<view class="bottom flex flex-direction align-end">
								<text>{{item.operation}}{{item.money}}</text>
								<text>余额{{item.newmoney}}</text>
							</view>
							<view class="icon">
								<text class="wlIcon-fanhui2"></text>
							</view>
						</view>
					</view>
					<text v-if="item.reamrk" class="margin-top-xs">备注：{{item.reamrk}}</text>
				</view>
			</view>
		</wanl-scroll-list>
		<!-- 空 -->
		<!-- <view v-if="dataList.length == 0">
			<wanl-empty src="ticket_default3x" text="没找到任何账单明细"/>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom"></view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			cur:0,
			tabList:['全部','收入','支出'],
			dataList: [],
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			},
			operation:'',
			option: {page: 1,auto: true,safeArea: true},
		};
	},
	methods: {
		// 加载数据
		load(paging,key) {
			uni.request({
				url: '/member/money/money_log',
				method: 'POST',
				data: {
					type: 1,
					operation: this.operation,
					page: paging.page
				},
				success: res => {
					let dataList = res.data.data;
					if(key == 'load') {
						this.dataList = [...this.dataList, ...dataList];
						this.$refs.list.loadSuccess({ list: this.dataList, total: res.data.total });
					} else if(key == 'refresh') {
						this.dataList = dataList;
						this.$refs.list.refreshSuccess({ list: this.dataList, total: res.data.total });
					}
				}
			});
			// 加载失败
			// this.$refs.list.loadFail()
			// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
			// this.$refs.list.refreshSuccess({ list: [1], total: 1 });
		},
		changeTab(index) {
			this.$refs.list.refreshScrollView()
			this.cur = index
			this.reload = true;
			switch (index){
				case 0:
					this.operation = ''
					break;
				case 1:
					this.operation = '+'
					break;
				case 2:
					this.operation = '-'
					break;
				default:
					break;
			}
			this.load({page:1},'refresh')
		},
		toMoney(item){
			this.$wanlshop.to(`/pages/user/money/details?data=${JSON.stringify(item)}`);
		}
	}
};
</script>

<style lang="less">
.list {
	.item {
		margin: 0 36rpx;
		border-bottom: 1rpx solid rgba(182,182,182,0.5);
		padding: 18rpx 0;
		position: relative;
		&:last-child {
			border-bottom: none;
		}
		> view {
			width: 100%;
		}
		.head {
			text {
				display: inline-block;
				&:nth-child(1) {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #444444;
					line-height: 44rpx;
				}
				&:nth-child(2) {
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 36rpx;
				}
			}
		}
		.bottom {
			text {
				display: inline-block;
				&:nth-child(1) {
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;
				}
				&:nth-child(2) {
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
					line-height: 36rpx;
				}
			}
		}
		> text {
			display: inline-block;
			font-size: 28rpx;
			color: #333333;
		}
		.icon {
			text {
				color: #888888;
				font-weight: bold;
				margin-left: 14rpx;
			}
		}
	}
}
.tab {
	text {
		display: inline-block;
		width: calc(100% / 3);
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 42rpx;
		position: relative;
		padding: 14rpx 0;
		&.cur {
			color: #4CBD66;
			display: flex;
			justify-content: center;
			align-items: center;
			&::after {
				position: absolute;
				content: "";
				display: inline-block;
				width: 34rpx;
				height: 4rpx;
				background: #4CBD66;
				bottom: 0;
			}
		}
	}
}
</style>
